<template>
    <div>
        
    <div class="help-bg"><img src="../assets/imgs/help-bg.376c758.png" alt="">
        <div class="help-title">
            帮助中心
            <p>Help Center</p>
        </div>
    </div>
    <div class="help-content warp">
        <div class="help-content-left">
            <div class="help-left-title">
                常见问题分类
            </div>
            <div class="help-line"></div>
            <ul>
                <li><a href="" class="active">
            视频相关
          </a></li>
                <li><a href="" class="">
            听力相关
          </a></li>
                <li><a href="" class="">
            账号相关
          </a></li>
                <li><a href="" class="">
            VIP相关
          </a></li>
                <li><a href="" class="">
            支付相关
          </a></li>
                <li><a href="" class="">
            移动端
          </a></li>
                <li><a href="" class="">
            小程序
          </a></li>
                <li><a href="" class="">
            其他问题
          </a></li>
                <li><a href="" class="">
            通知公告
          </a></li>
            </ul>
        </div>
        <div class="help-content-right">
            <h1 class="help-title">
                视频播放不了怎么办
            </h1>
            <div class="help-right-content mt-10 content-body">
                <p>一般来说大多数视频都能播放的，如果您在浏览网站时发现视频无法播放请按照以下指示尝试以下哦。<br></p>
                <p><br></p>
                <p>第一步</p>
                <p> &nbsp; &nbsp; 确认一下视频是否加载成功，如下图所示，如果有显示时间，则说明这个资源是没问题的。如果没有显示，请直接联系管理员更新，或者在该视频下面直接评论，管理员收到消息后，第一时间更新资源。</p>
                <p><img src="../assets/imgs/video1.png" width="100%"></p>
                <p><br></p>
                <p>
                    第二步：<br>
                </p>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;如果第一步没有问题，那么就可能是您的设备的问题了，如果您用的电脑，请升级您的浏览器，建议使用 谷歌浏览器 或者360浏览器<br>
                </p>
            </div>
        </div>
    </div>


    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.help-bg {
  position: relative;
  img {
    height: 200px;
    width: 100%;
  }
  .help-title {
    position: absolute;
    top: 42px;
    left: 45%;
    font-size: 40px;
    font-weight: 400;
    color: #fff;
    line-height: 56px;
    letter-spacing: 5px;
    p {
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      line-height: 20px;
      letter-spacing: 8px;
      text-align: center;
    }
  }
}
.help-content {
  margin-top: -40px;
  position: relative;
  display: flex;
  z-index: 5;
  .help-content-left {
    width: 240px;
    height: 500px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
    border-radius: 6px;
    .help-left-title {
      padding: 17px 0 17px 20px;
      font-size: 18px;
      font-weight: 400;
      color: #333;
      line-height: 25px;
    }
    .help-line {
      border-top: 1px solid #eee;
      height: 17px;
    }
    ul {
      li {
        width: 100%;
        padding: 12px 0 12px 20px;
        font-size: 14px;
        font-weight: 400;
        color: #333;
      }
    }
  }
  .help-content-right {
    margin-left: auto;
    width: 870px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgb(0 0 0 / 6%);
    border-radius: 6px;
    padding: 30px;
    margin-bottom: 30px;
    .help-title {
      text-align: center;
    }
  }
}
.help-content .help-content-left ul li .active,
.help-content .help-content-left ul li a:hover {
  color: #48c5a3;
}
.content-body {
  line-height: 1.6;
  font-size: 16px;
  color: #333;
  margin-top: 40px;
  p {
    font-size: 16px;
    letter-spacing: .4px;
    line-height: 30px;
    color: #606060;
    text-align: left;
    text-align: justify;
    text-justify: inter-ideograph;
    word-wrap: break-word;
    text-justify: kashida;
    margin-bottom: 20px;
    overflow: hidden;
  }
}

</style>